<template>
  <div
    class="product-card"
    :class="{
      loading: loading,
      horizontal: horizontal,
    }"
    @click="goToDetail"
  >
    <!-- 商品图片 -->
    <div class="product-image">
      <el-image
        :src="productData.image"
        :alt="productData.title"
        fit="cover"
        loading="lazy"
        :preview-src-list="productData.gallery || [productData.image]"
      >
        <template #placeholder>
          <div class="image-placeholder">
            <el-icon><Picture /></el-icon>
          </div>
        </template>
        <template #error>
          <div class="image-error">
            <el-icon><PictureRound /></el-icon>
          </div>
        </template>
      </el-image>

      <!-- 标签 -->
      <div
        v-if="productData.tags && productData.tags.length"
        class="product-tags"
      >
        <el-tag
          v-for="tag in productData.tags.slice(0, 3)"
          :key="tag"
          :type="getTagType(tag)"
          size="small"
          effect="dark"
        >
          {{ tag }}
        </el-tag>
      </div>

      <!-- 收藏按钮 -->
      <div class="favorite-button" @click.stop="handleFavorite">
        <el-icon :class="{ 'is-favorite': productData.isFavorite }">
          <StarFilled />
        </el-icon>
      </div>

      <!-- 快速操作按钮 -->
      <div class="quick-actions">
        <el-button
          type="primary"
          :icon="ShoppingCart"
          @click.stop="handleAddToCart"
        >
          加入购物车
        </el-button>
        <el-button @click.stop="handleBuyNow">立即购买</el-button>
      </div>
    </div>

    <!-- 商品信息 -->
    <div class="product-info">
      <!-- 商品标题 -->
      <h3 class="product-title" :title="productData.title">
        {{ productData.title }}
      </h3>

      <!-- 商品描述 -->
      <p v-if="productData.description" class="product-description">
        {{ productData.description }}
      </p>

      <!-- 价格区域 -->
      <div class="price-section">
        <div class="price-info">
          <span class="current-price"
            >¥{{ formatPrice(productData.price) }}</span
          >
          <span v-if="productData.originalPrice" class="original-price">
            ¥{{ formatPrice(productData.originalPrice) }}
          </span>
          <span v-if="productData.discount" class="discount-tag">
            {{ productData.discount }}
          </span>
        </div>
        <div v-if="productData.sales" class="sales-info">
          已售 {{ formatNumber(productData.sales) }}
        </div>
      </div>

      <!-- 评分区域 -->
      <div class="rating-section">
        <el-rate
          v-model="productData.rating"
          disabled
          show-score
          text-color="#ff9900"
          score-template="{value}"
        />
        <span class="review-count">
          ({{ formatNumber(productData.reviewCount) }}条评价)
        </span>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-mask">
      <el-skeleton :rows="3" animated />
    </div>

    <!-- 促销信息 -->
    <div v-if="productData.promotion" class="promotion-info">
      {{ productData.promotion }}
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import {
  Picture,
  PictureRound,
  ShoppingCart,
  StarFilled,
} from "@element-plus/icons-vue";

const router = useRouter();

const props = defineProps({
  product: {
    type: Object,
    required: true,
    default: () => ({}),
  },
  loading: {
    type: Boolean,
    default: false,
  },
  horizontal: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["favorite", "add-to-cart", "buy-now"]);

// 创建本地响应式数据副本
const productData = ref({ ...props.product });

// 跳转到商品详情页
const goToDetail = () => {
  if (props.loading) return;
  router
    .push({
      path: `/shop/product/${props.product.id}`,
    })
    .catch((err) => {
      console.error("路由跳转错误:", err);
    });
};

// 格式化价格
const formatPrice = (price) => {
  return Number(price).toFixed(2);
};

// 格式化数字
const formatNumber = (num) => {
  return new Intl.NumberFormat().format(num);
};

// 获取标签类型
const getTagType = (tag) => {
  const tagTypes = {
    新品: "success",
    热销: "danger",
    促销: "warning",
    限量: "info",
  };
  return tagTypes[tag] || "primary";
};

// 处理收藏
const handleFavorite = () => {
  productData.value.isFavorite = !productData.value.isFavorite;
  emit("favorite", { ...productData.value });
};

// 处理加入购物车
const handleAddToCart = () => {
  emit("add-to-cart", { ...productData.value });
};

// 处理立即购买
const handleBuyNow = () => {
  emit("buy-now", { ...productData.value });
};

// 监听原始数据变化
onMounted(() => {
  productData.value = { ...props.product };
});
</script>

<style lang="scss" scoped>
.product-card {
  @apply relative bg-white dark:bg-gray-800 rounded-lg overflow-hidden transition-all duration-300 
         border border-gray-200 dark:border-gray-700 
         shadow-[0_2px_12px_0_rgba(0,0,0,0.1)] dark:shadow-[0_2px_12px_0_rgba(0,0,0,0.3)];

  &:hover {
    @apply transform -translate-y-1
           shadow-[0_4px_20px_0_rgba(0,0,0,0.15)] dark:shadow-[0_4px_20px_0_rgba(0,0,0,0.4)]
           border-gray-300 dark:border-gray-600;

    .quick-actions {
      @apply opacity-100;
    }
  }

  &.horizontal {
    @apply flex;

    .product-image {
      @apply w-1/3 flex-shrink-0;
    }

    .product-info {
      @apply w-2/3 flex-grow;
    }
  }

  .product-image {
    @apply relative aspect-square overflow-hidden;

    :deep(.el-image) {
      @apply w-full h-full transition-transform duration-300;

      &:hover {
        @apply transform scale-110;
      }
    }

    .image-placeholder,
    .image-error {
      @apply w-full h-full flex items-center justify-center bg-gray-100 dark:bg-gray-700 text-gray-400 dark:text-gray-500;

      .el-icon {
        @apply text-3xl;
      }
    }
  }

  .product-tags {
    @apply absolute top-2 left-2 flex flex-wrap gap-1 z-10;

    .el-tag {
      @apply shadow-sm;
    }
  }

  .favorite-button {
    @apply absolute top-2 right-2 z-10 w-8 h-8 
           flex items-center justify-center 
           bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm 
           rounded-full cursor-pointer
           transition-all duration-300;

    &:hover {
      @apply bg-white dark:bg-gray-700;
    }

    .el-icon {
      @apply text-2xl text-gray-400 transition-colors duration-300;

      &.is-favorite {
        @apply text-yellow-400 dark:text-yellow-400;

        :deep(svg) {
          @apply fill-current;
        }
      }
    }
  }

  .quick-actions {
    @apply absolute bottom-0 left-0 right-0 p-4 bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm
           flex justify-center gap-2 opacity-0 transition-opacity duration-300;
  }

  .product-info {
    @apply p-4;

    .product-title {
      @apply text-lg font-medium text-gray-900 dark:text-gray-100 mb-2 line-clamp-2 hover:text-primary-600 dark:hover:text-primary-400 transition-colors;
    }

    .product-description {
      @apply text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-2;
    }

    .price-section {
      @apply flex items-center justify-between mb-3;

      .price-info {
        .current-price {
          @apply text-xl font-bold text-primary-600 dark:text-primary-400;
        }

        .original-price {
          @apply ml-2 text-sm text-gray-400 dark:text-gray-500 line-through;
        }

        .discount-tag {
          @apply ml-2 px-2 py-0.5 text-xs text-white bg-primary-600 dark:bg-primary-500 rounded-full;
        }
      }

      .sales-info {
        @apply text-sm text-gray-500 dark:text-gray-400;
      }
    }

    .rating-section {
      @apply flex items-center gap-2;

      :deep(.el-rate) {
        @apply text-warning-500;
      }

      .review-count {
        @apply text-sm text-gray-500 dark:text-gray-400;
      }
    }
  }

  .promotion-info {
    @apply px-4 py-2 text-sm text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/20 border-t border-primary-100 dark:border-primary-800;
  }
}

// 加载状态
.loading-mask {
  @apply absolute inset-0 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm flex items-center justify-center;
}

// 动画
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.loading {
  .product-image,
  .product-title,
  .price-section {
    @apply animate-pulse;
  }
}
</style>
